<template>
  <div class="audio-player">
    <div v-if="showUploadAnswerFileFlag" class="overlay">
      <uploadanswerfile
        @cancle-upload="closeUploadAnswerFile"
      ></uploadanswerfile>
    </div>
    <div class="tabs">
      <button class="active">初中英语</button>
      <button>中考真题</button>
      <button>高中英语</button>
      <button>高考真题</button>
      <button>CET4</button>
      <button>CET6</button>
    </div>
    <div class="audio-control">
      <h3 class="title">标题：七年级-第一单元测试-听力部分(智能设置锚点)</h3>
      <button class="return-button" @click="back">返回</button>
      <!-- 添加返回按钮 -->
      <div class="audio-progress">
        <span class="time">00:00</span>
        <input
          type="range"
          min="0"
          max="1350"
          value="0"
          step="1"
          class="progress-bar"
          @input="updateCurrentTime"
          @change="seekToTime"
        />
        <span class="time">23:50</span>
        <div class="anchors">
          <div
            v-for="(anchor, index) in anchors"
            :key="index"
            class="anchor"
            :style="{ left: `${anchor}%` }"
          >
            <div class="anchor-arrow">
              <span class="anchor-number">{{ index + 1 }}</span>
            </div>
            <div class="anchor-line"></div>
          </div>
        </div>
      </div>
      <div class="playback-controls">
        <button @click="choose">选择试题与答案文档</button>
        <button @click="play">设置锚点</button>
        <button @click="pause">取消锚点</button>
      </div>
      <div class="choose-tip">
        <p>
          注意：选择带有试题和正确答案的文档，系统将根据您上传的文档进行智能分析，并且根据分析的结果智能生成锚点。如果生成的锚点不符合您的需求，您可以根据需求删除锚点并且重新设置锚点。
        </p>
      </div>
      <div class="audio-anchors">
        <div>
          <p>锚点：</p>
        </div>
        <div class="anchor-checkboxes">
          <label v-for="(anchor, index) in anchors" :key="index">
            <input
              type="checkbox"
              :id="'anchor-' + index"
              :value="index"
              v-model="selectedAnchors"
              @change="toggleAnchor(index)"
            />
            {{ index + 1 }}
          </label>
        </div>
      </div>
    </div>
    <div class="text-content">
      <div>
        <p>原文：</p>
      </div>
      <div class="text-original">
        <p>
          <span
            v-for="(word, index) in originalText"
            :key="index"
            :class="{ highlighted: highlightedText.includes(index) }"
            >{{ word }}</span
          >
        </p>
      </div>
      <div>
        <p>译文：</p>
      </div>
      <div class="text-translation">
        <p>
          <span
            v-for="(word, index) in translationText"
            :key="index"
            :class="{
              highlighted: highlightedText.includes(
                index + originalText.length
              ),
            }"
            >{{ word }}</span
          >
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import uploadanswerfile from "./uploadanswerfile.vue";
export default {
  components: {
    uploadanswerfile,
  },
  data() {
    return {
      currentTime: 0,
      anchors: [10, 30, 45, 60, 75, 80, 90], // Anchor times in seconds
      highlightedText: [],
      selectedAnchors: [], // Selected anchors
      originalText: [
        "The",
        "recent",
        "high-profile",
        "movie",
        "Crazy",
        "Rich",
        "Asians",
        "shows",
        "a",
        "side",
        "of",
        "Singapore",
        "that",
        "most",
        "people",
        "-not",
        "even",
        "Singaporeans",
        "don't",
        "get",
        "to",
        "see.",
        "While",
        "the",
        "story",
        "is",
        "largely",
        "set",
        "in",
        "Singapore,",
        "filming",
        "took",
        "place",
        "both",
        "in",
        "the",
        "city",
        "state",
        "and",
        "neighbouring",
        "Malaysia.",
        "Attractions",
        "such",
        "as",
        "Singapore's",
        "Marina",
        "Bay",
        "Sands",
        "and",
        "Malaysia's",
        "heritage",
        "Cheong",
        "Fatt",
        "Sze",
        "Mansion",
        "appeal",
        "to",
        "people.",
      ],
      translationText: [
        "最近",
        "备受",
        "瞩目",
        "的电影",
        "《",
        "疯狂的",
        "亚洲",
        "富人",
        "》",
        "展示",
        "了",
        "大多",
        "数",
        "人",
        "（",
        "甚至",
        "新加坡",
        "人",
        "）",
        "都",
        "不",
        "熟悉",
        "的",
        "新加坡",
        "生活",
        "。",
        "虽然",
        "故事",
        "主要",
        "发生",
        "在",
        "新加坡",
        "，",
        "但",
        "拍摄",
        "地点",
        "包括",
        "新加坡",
        "和",
        "邻近",
        "的",
        "马来西亚",
        "。",
        "像",
        "新加坡",
        "的",
        "滨海",
        "湾",
        "金沙",
        "和",
        "马来西亚",
        "的",
        "文化遗产",
        "陈",
        "氏",
        "大宅",
        "等",
        "景点",
        "吸引",
        "了",
        "众多",
        "游客",
        "。",
      ],
      showUploadAnswerFileFlag: false,
    };
  },
  methods: {
    choose() {
      this.showUploadAnswerFileFlag = true;
    },
    play() {
      // Play audio logic
    },
    pause() {
      // Pause audio logic
    },
    restart() {
      // Restart audio logic
      this.currentTime = 0;
      this.highlightedText = [];
    },
    togglePlayAll() {
      // Play all logic
    },
    selectAnchor() {
      // Select anchor logic
    },
    seekToAnchor(index) {
      // Seek to anchor logic
      const anchorTime = this.anchors[index];
      this.currentTime = anchorTime;
      this.updateCurrentTime({ target: { value: anchorTime } });
    },
    updateCurrentTime(event) {
      // Update current time logic
      console.log("Current time:", event.target.value);
      this.currentTime = event.target.value;
      this.highlightTextAt(this.currentTime);
    },
    highlightTextAt(time) {
      // Highlight text at current time logic
      this.highlightedText = [];
      const wordsPerSecondOriginal = this.originalText.length / 1350;
      const wordsPerSecondTranslation = this.translationText.length / 1350;

      const indexToHighlightOriginal = Math.floor(
        time * wordsPerSecondOriginal
      );
      const indexToHighlightTranslation = Math.floor(
        time * wordsPerSecondTranslation
      );

      for (let i = 0; i <= indexToHighlightOriginal; i++) {
        this.highlightedText.push(i);
      }

      for (let i = 0; i <= indexToHighlightTranslation; i++) {
        this.highlightedText.push(i + this.originalText.length); // 偏移量为原文长度
      }
    },
    toggleAnchor(index) {
      // Toggle anchor selection
      const indexToToggle = this.selectedAnchors.indexOf(index);
      if (indexToToggle > -1) {
        this.selectedAnchors.splice(indexToToggle, 1);
      } else {
        this.selectedAnchors.push(index);
      }
    },
    seekToTime(event) {
      const timeInSeconds = event.target.value;
      this.currentTime = timeInSeconds;
      this.audio.currentTime = this.currentTime;
      this.play();
    },
    back() {
      // 例如，可以关闭示例文件视图
      this.$emit("close-autoanchorpoints");
    },
    closeUploadAnswerFile() {
      this.showUploadAnswerFileFlag = false;
    },
  },
};
</script>

<style scoped>
.audio-player {
  border: 1px solid #ccc;
  padding: 20px;
  width: 1500px; /* Adjust width as needed */
  height: 800px;
  margin: 0 auto;
}

.tabs {
  display: flex;
  margin-bottom: 20px;
}

.tabs button {
  flex: 1;
  padding: 10px;
  border: none;
  background-color: #f0f0f0;
  cursor: pointer;
}

.tabs .active {
  background-color: #666;
  color: white;
}

.audio-control {
  margin-bottom: 30px; /* Add more margin-bottom to move content down */

  .title {
    text-align: center; /* 将标题居中 */
    margin-bottom: 30px;
  }
}

.audio-progress {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  position: relative;
  width: 100%;
  height: 40px; /* Make progress bar larger */
}

.audio-progress .time {
  margin: 0 10px;
}

.audio-anchors {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px; /* Add more margin-bottom to move content down */
}

.anchor-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* Add space between checkboxes */
}

.anchor-checkboxes input[type="checkbox"] {
  margin-right: 5px;
}

.text-content {
  margin-bottom: 30px; /* Add more margin-bottom to move content down */
  overflow-x: hidden; /* Hide horizontal scrollbar */
  overflow-y: auto; /* Show vertical scrollbar when needed/
  max-height: 400px; / Set a maximum height /
  padding-right: 10px; / Add padding to avoid content from being hidden by scrollbar */
}
.text-original,
.text-translation {
  margin-bottom: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 5; /* Number of lines to show */
  -webkit-box-orient: vertical;
}
.text-original p span.highlighted,
.text-translation p span.highlighted {
  color: red;
}
.text-original p span,
.text-translation p span {
  display: inline-block; /* Make each word an inline-block element */
  margin-right: 2px; /* Add space between words */
}

.text-original p span.highlighted,
.text-translation p span.highlighted {
  color: red;
}
.playback-controls {
  display: flex;
  /* justify-content: space-between; */
  margin-bottom: 20px;
}
.playback-controls button {
  padding: 10px 20px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-right: 30px;
}
.playback-controls button:hover {
  background-color: #45a049;
}
input[type="range"] {
  flex: 1;
  height: 20px; /* Make the slider thicker */
  cursor: pointer;
}
.anchor {
  position: absolute;
  top: -5px; /* Move anchor up by 5px /
  left: 0;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  background-color: transparent;
  margin-left: -5px; / Center the anchor point */
}
.anchor-arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #4caf50;
  display: flex;
  align-items: center;
  justify-content: center;
}
.anchor-number {
  position: relative;
  top: -12px;
  color: #4caf50;
  font-size: 12px;
}
.anchor-line {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 20px; /* Make the line longer */
  background-color: #4caf50;
  z-index: 1;
}
.return-button {
  float: right; /* 将按钮浮动到右侧 */
  background-color: #4caf50; /* 按钮背景颜色 */
  border: none; /* 去掉边框 */
  padding: 5px 10px; /* 添加内边距 */
  cursor: pointer; /* 鼠标悬停时显示手型 */
  font-size: 14px; /* 字体大小 */
  border-radius: 5px;
  color: #fff;
  width: 100px;
  margin-top: -50px;
  margin-bottom: 20px;
}

.return-button:hover {
  background-color: #4caf50; /* 鼠标悬停时的背景颜色 */
}
.choose-tip {
  color: red;
}
</style>
